<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(item, index) in tableColumn"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      class="menuLi"
    ></el-table-column>
    <el-table-column
      v-if="!!operation.operation"
      :fixed="operation.fixed"
      :label="operation.name"
      :width="operation.width"
    >
      <template slot-scope="scope">
        <!-- <el-button @click="handleClick(scope.row)" type="text" size="small" -->
        <!-- >查看</el-button -->
        <!-- > -->
        <el-button
          v-for="(item, index) in operation.operation"
          :key="index"
          type="text"
          size="small"
          @click="operationClick(scope.row, item.fun)"
          >{{ item.name }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "menu1",
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    operation: {
      type: Object,
      default: {
        name: "操作",
        width: "100",
        fixed: false,
        operation: null,
      },
    },
  },
  data() {
    return {
      tableColumn: [
        {
          prop: "date",
          label: "日期",
          width: "180",
        },
        {
          prop: "name",
          label: "姓名",
          width: "180",
        },
        {
          prop: "address",
          label: "地址",
        },
      ],
    };
  },
  created() {
    //   this.init();
  },
  mounted() {
    console.log(this.operation);
  },
  methods: {
    operationClick(row, fun) {
      console.log(row);
      console.log(fun);
      this.$parent.window[fun].call(this, "param");
      this.$emit(fun, {
        message: row,
      });
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style scoped>
</style>
